<template>
<!-- 楼宇管理 -->
    <div class="BuildingManagement">
        <div class="query">
             <el-select
                v-model="value2"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择" class="selection">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
        <!-- 车位、车库路由 -->
        <div class="Parkingspacegarage">
            <ul class="Parkingspacegarageheader">
                <li :class="{active:tabshow==0}" @click="tab(0)">车位管理</li>
                <li :class="{active:tabshow==1}" @click="tab(1)">车库管理</li>
            </ul>
            <div class="routerbox">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            options: [{
            value: '选项1',
            label: '万达文旅城'
            }, {
            value: '选项2',
            label: '碧桂园'
            }, {
            value: '选项3',
            label: '万象城'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value2: [],
            tableData: [
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                {
                    date: '1',
                    Belongingcommunity: '万象城',
                    Productarea: '底商区域',
                    ShopNumber:'A-021',
                    Floorlocation:'1',
                    buildingarea:'150㎡',
                    usablearea:'150㎡',
                    Housetype:'商铺',
                    Housingstatus:"正常",
                    edit:'绑定业主',
                    del:'编辑',
                    opertes:'删除',
                }, 
                
            ],//数据表格数据
            tabshow:0,
        }
    },
    methods:{
        select(){
            console.log("查询")
        },
        reasert(){
            console.log("重置")
        },
        tab(i){
            this.tabshow=i
            if(i==0){
                this.$router.push('/about/Parkingspacemanagement/Parkinglotmanagrement')
            }else{
                this.$router.push('/about/Parkingspacemanagement/Garagemanagement')
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    .BuildingManagement{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .query{
            width: 1260px;
            height: 95px;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border:  1px solid rgba(233, 233, 233, 1);
            padding-left: 20px;
            position: relative;
            .selection{
                width: 405px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            // 查询按钮
            .chaxun{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0079fe !important;
                .el-icon-search{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .chaxun:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            // 重置按钮
            .reaseat{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff !important;
                .el-icon-refresh-right{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .reaseat:hover{
                border-color: #0079fe !important;
                color: #0079fe !important;
            }
            
        }
        // 车位、车库路由
        .Parkingspacegarage{
            width: 100%;
            // background-color: #fff;
            padding-bottom: 30px;
            .Parkingspacegarageheader{
                height: 50px;
                display: flex;
                align-items: center;
                background-color: #f9f9f9;
                border: 1px solid rgba(233, 233, 233, 1);
                margin-bottom: 2px;
                li{
                    width: 150px;
                    text-align: center;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    font-size: 14px;
                    color: #666666;
                    cursor: pointer;
                }
                li:hover{
                    color: #0079fe;
                }
                .active{
                    color: #0079fe;
                }
            }
            .routerbox{
                height: 100%;
            }
        }
    }
     

</style>